{% block sw_product_variants_price_field %}
<div
    class="sw-product-variants-price-field"
    :class="{'is--readonly': readonly}"
>
    {% block sw_product_variants_price_field_gross %}
    <div class="sw-field">
        <mt-number-field
            v-model="price.gross"
            size="small"
            class="sw-product-variants-price-field__input"
            :disabled="readonly"
            :digits="currency.decimalPrecision"
            v-bind="$attrs"
            @update:model-value="onPriceGrossChange"
        />
    </div>
    {% endblock %}

    {% block sw_product_variants_price_field_lock_button %}
    <button
        class="sw-product-variants-price-field__lock"
        :class="{'is--locked': price.linked}"
        @click="onLockSwitch"
    >
        <mt-icon
            v-if="price.linked"
            name="regular-lock"
            size="16"
        />
        <mt-icon
            v-else
            name="regular-lock-open"
            size="16"
        />
    </button>
    {% endblock %}

    {% block sw_product_variants_price_field_net %}
    <div class="sw-field">
        <mt-number-field
            v-model="price.net"
            size="small"
            class="sw-field sw-product-variants-price-field__input"
            :disabled="readonly"
            :digits="currency.decimalPrecision"
            v-bind="$attrs"
            @update:model-value="onPriceNetChange"
        />
    </div>
    {% endblock %}
</div>
{% endblock %}
